<template>
  <div class="lianxi_eight">
    <m-header modile-title="练习8" go-back="true"></m-header>
    <button @click="clickPopup">点击我出现弹窗</button>
    <mt-popup
      v-model="popupVisible"
      :closeOnClickModal="false"
      popup-transition="popup-fade">
      1111
    </mt-popup>
    <!--注：img绑定:src的路径必须要url-->
    <div class="img-box" v-for="(url, index) in imgArr" :style="{'background-image': 'url(' + url + ')'}" :key="index">
      <img preview="repairDetail" preview-text="" :src="url" alt="">
    </div>
    <!--点击获取地理位置-->
    <button class="map_btn" @click="mapBtn">点击</button>
  </div>
</template>
<style lang="scss">
  .lianxi_eight {
    padding-top: 60px;
    button {
      width: 100%;
      height: 50px;
      font-size: 20px;
      color: #fff;
      background: #f23030;
    }
    .img-box {
      float: left;
      width: 30%;
      padding: 15%;
      margin: 1.65%;
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
      }
    }
    .map_btn {
      width: 100%;
      height: 60px;
      background: #0bb20c;
      font-size: 24px;
      color: #fff;
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import {Toast} from 'mint-ui'

  export default {
    data() {
      return {
        popupVisible: false,
        imgArr: [
          "http://pic.zgwyzxw.cn/neighbor/2018-09-13%2F5b99f48ed63b7.jpg",
          "http://pic.zgwyzxw.cn/neighbor/2018-09-13%2F5b99f48f22532.jpg",
          "http://pic.zgwyzxw.cn/neighbor/2018-09-13%2F5b99f48f2e747.jpg"]
      }
    },
    created() {
      console.log(this.imgArr)
    },
    methods: {
      clickPopup() {
        this.popupVisible = true
      },
      mapBtn() {
      }
    },
    components: {
      mHeader
    }
  }
</script>
